import { getInstanceByDom, init } from "echarts/core";
import { useEffect, useRef } from "react";
import 'echarts-gl';

const Earth3DChart = () => {
    // 放置图表的元素
    const chartRef = useRef(null)

    // 初始化图表
    useEffect(() => {
        const myChart = init(chartRef.current);
        // 开始观察
        const observer = new ResizeObserver(() => myChart?.resize());
        observer.observe(chartRef.current!);
        // 结束观察，清理图表
        return () => {
            observer.disconnect();
            myChart.dispose();
        };
    }, []);

    // 更新图表
    useEffect(() => {
        // 1. 生成实例
        const myChart = getInstanceByDom(chartRef.current!);
        // 2. 准备图表参数
        const option = {
            backgroundColor: '#000',
            globe: {
                baseTexture: '/img/world.topo.bathy.200401.jpg',
                heightTexture: '/img/world.topo.bathy.200401.jpg',
                displacementScale: 0.04,
                shading: 'realistic',
                environment: '/img/starfield.jpg',
                realisticMaterial: {
                    roughness: 0.9
                },
                postEffect: {
                    enable: true
                },
                light: {
                    main: {
                        intensity: 5,
                        shadow: true
                    },
                    ambientCubemap: {
                        texture: '/hdr/earth3DChart/pisa.hdr',
                        diffuseIntensity: 0.2
                    }
                }
            }
        };
        // 3. 渲染参数
        myChart?.setOption(option);
    }, []);
    return (
        <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
    );
};

export default Earth3DChart;